<article class="component" id="cards">
  <h2 class="component-title">Cards</h2>
  <p class="component-description">Cards, along with List View, is a one more great way to contain and orginize your information. Cards contains unique related data, for example, a photo, text, and link all about a single subject. Cards are typically an entry point to more complex and detailed information.</p>

  <div class="component-example component-example-fullbleed">
  </div>

{% highlight html %}
<header class="bar bar-nav">
  <h1 class="title">Cards</h1>
</header>
<div class="content">
  <div class="content-block-title">Simple Cards</div>
  <div class="card">
    <div class="card-content">
      <div class="card-content-inner">This is simple card with plain text. But card could contain its own header, footer, list view, image, and any elements inside.</div>
    </div>
  </div>
  <div class="card">
    <div class="card-header">Card header</div>
    <div class="card-content">
      <div class="card-content-inner">Card with header and footer. Card header is used to display card title and footer for some additional information or for custom actions.</div>
    </div>
    <div class="card-footer">Card Footer</div>
  </div>
  <div class="card">
    <div class="card-content">
      <div class="card-content-inner">Another card. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet. Mauris aliquet magna justo. </div>
    </div>
  </div>            

  <div class="content-block-title">Styled Cards</div>

  <div class="card demo-card-header-pic">
    <div style="background-image:url(...)" valign="bottom" class="card-header color-white no-border">Journey To Mountains</div>
    <div class="card-content">
      <div class="card-content-inner">
        <p class="color-gray">Posted on January 21, 2015</p>
        <p>Quisque eget vestibulum nulla...</p>
      </div>
    </div>
    <div class="card-footer">
      <a href="#" class="link">Like</a>
      <a href="#" class="link">Read more</a>
    </div>
  </div>
  <div class="content-block-title">Facebook Cards</div>
   
  <div class="card facebook-card">
    <div class="card-header no-border">
      <div class="facebook-avatar"><img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" width="34" height="34"></div>
      <div class="facebook-name">John Doe</div>
      <div class="facebook-date">Monday at 3:47 PM</div>
    </div>
    <div class="card-content"><img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" width="100%"></div>
    <div class="card-footer no-border">
      <a href="#" class="link">Like</a>
      <a href="#" class="link">Comment</a>
      <a href="#" class="link">Share</a>
    </div>
  </div>

  <div class="card facebook-card">
    <div class="card-header">
      <div class="facebook-avatar"><img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" width="34" height="34"></div>
      <div class="facebook-name">John Doe</div>
      <div class="facebook-date">Monday at 2:15 PM</div>
    </div>
    <div class="card-content">
      <div class="card-content-inner">
        <p>What a nice photo i took yesterday!</p>
        <img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" width="100%">
        <p class="color-gray">Likes: 112    Comments: 43</p>
      </div>
    </div>
    <div class="card-footer">
      <a href="#" class="link">Like</a>
      <a href="#" class="link">Comment</a>
      <a href="#" class="link">Share</a>
    </div>
  </div>   
</div>
{% endhighlight %}

</article>
